<!DOCTYPE html>
<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
<html>
  <head>
    <title>Web Animations 1.0</title>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
    <script src="respec.js" class='remove'></script>
    <script
      src='http://dev.w3.org/2009/dap/ReSpec.js/js/lang/sh_javascript.min.js'
      class='remove'></script>
    <script class='remove'>
      var respecConfig = {
        // specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use
        // ED.
        specStatus: "ED",

        // the specification's short name, as in
        // http://www.w3.org/TR/short-name/
        // shortName:            "web-anim",

        // if your specification has a subtitle that goes below the main
        // formal title, define it here
        // subtitle   :  "an excellent document",

        // if you wish the publication date to be other than today, set this
        // publishDate:  "2009-08-06",

        // if the specification's copyright date is a range of years, specify
        // the start date here:
        // copyrightStart: "2012"

        // if there is a previously published draft, uncomment this and set
        // its YYYY-MM-DD date and its maturity status
        // previousPublishDate: "1977-03-15",
        // previousMaturity: "WD",

        // if there a publicly available Editor's Draft, this is the link
        edDraftURI:
        "http://dev.w3.org/fxtf/web-anim/",

        // if this is a LCWD, uncomment and set the end of its review period
        // lcEnd: "2009-08-05",

        // if you want to have extra CSS, append them to this list
        // it is recommended that the respec.css stylesheet be kept
        extraCSS: ["respec.css"],

        // Turning off inlineCSS for now since if extraCSS points to
        // a relative URL your testing from a file URL the XHR will fail.
        // Probably should turn this back on once this is hosted on a server
        // somewhere.
        inlineCSS: false,

        // editors, add as many as you like
        // only "name" is required
        editors:  [
            { name: "Brian Birtles", mailto: "bbirtles@mozilla.com",
              company: "Mozilla Japan", companyURL: "http://mozilla.jp/" },
            { name: "Shane Stephens", mailto: "shans@google.com",
              company: "Google, Inc", companyURL: "http://www.google.com/" },
            { name: "Rik Cabanier", mailto: "cabanier@adobe.com",
              company: "Adobe Systems", companyURL: "http://www.adobe.com/" },
            { name: "Alex Danilo", mailto: "adanilo@google.com",
              company: "Google, Inc", companyURL: "http://www.google.com/" },
            { name: "Dmitry Baranovskiy", mailto: "baranovs@adobe.com",
              company: "Adobe Systems", companyURL: "http://www.adobe.com/" },
            { name: "Tab Atkins", mailto: "jackalmage@gmail.com",
              company: "Google, Inc", companyURL: "http://www.google.com/" },
        ],

        // authors, add as many as you like.
        // This is optional, uncomment if you have authors as well as editors.
        // only "name" is required. Same format as editors.

        //authors:  [
        //    { name: "Your Name", url: "http://example.org/",
        //      company: "Your Company", companyURL: "http://example.com/" },
        //],

        // XXX If we continue using ReSpec then we need to tweak it to support
        // multiple working groups. It includes updating the patent section
        // prose to say "groups" instead of "group" etc.
        // name of the WG
        wg: "CSS Working Group (part of the Style Activity) and the SVG " +
            "Working Group (part of the Graphics Activity)",

        // URI of the public WG page
        // wgURI: "http://www.w3.org/Graphics/fx/",

        // name (without the @w3c.org) of the public mailing to which comments
        // are due
        wgPublicList: "public-fx",

        // URI of the patent status for this WG, for Rec-track documents
        // !!!! IMPORTANT !!!!
        // This is important for Rec-track documents, do not copy a patent URI
        // from a random document unless you know what you're doing. If in
        // doubt ask your friendly neighbourhood Team Contact.
        wgPatentURI:  "",

        noIDLSorting: true,
        noIDLIn: true
      };
    </script>
    <!--
      ReSpec.js wishlist:

      Add here any issues you find with ReSpec including missing features. It
      will help us decide if we should continue using it and work out what we
      need to fix.

      * Need ability to cross-reference members of interfaces (e.g. constants
        etc.)
      * Get rid of the description section next to parameters? It seems more
        natural to describe the parameters in the description of the method?
      * Allow making cross-references to specific methods and members.
      * Don't make unofficial drafts use the Creative Commons Attribution
        license.
      * Support enums in WebIDL
      * Support NamedConstructors (including where the parameters use angle
        brackets like sequence<TimedTemplate>)
    -->
  </head>
  <body>
    <section id='abstract'>
      This is the abstract for your specification.
    </section>

    <section class="informative">
      <h2>Introduction</h2>
      <p>
        Web Animations defines features for supporting animation and
        synchronization on the Web platform by means of a programming interface.
        This interface is intended to be used both directly to easily produce
        animations using script, as well as a foundation for other
        specifications whose behavior can be defined in terms of these features.
      </p>
      <section>
        <h3>Relationship to other specifications</h3>
        <p>
          CSS Transitions [[CSS3-TRANSITIONS]], CSS Animations 
          [[CSS3-ANIMATIONS]], and SVG [[SVG112]] all provide mechanisms that
          generate animated content on a web page.
          Although the three specifications provide similar functionality,
          the syntaxes are incompatible and the animations cannot be
          interchanged.
          Furthermore, the interfaces available for interacting with animations
          from script are largely general-purpose interfaces with few features
          tuned specifically to the creation and manipulation of animations.
        </p>
        <p>
          This specification proposes an abstract animations model that
          encompasses the abilities of both CSS and SVG, and additionally
          provides a programming interface to expose these features to script.
        </p>
        <p>
          This specification is accompanied by a CSS embedding specification,
          which describes how CSS features can be implemented in terms of Web 
          Animations primitives, and an SVG embedding specification, which
          describes how SVG features can be implemented in terms of Web
          Animations primitives.
        </p>
        <p>
          As a result, this specification does not directly alter the behavior
          of CSS Transitions, CSS Animations, or SVG.
          However, Web Animations is intended to replace the SMIL Animation
          [[SMIL-ANIMATION]] specification where it is currently used to define
          the behavior of SVG's animation features.
        </p>
        <p>
          This specification makes some additions to some interfaces defined in
          HTML5 [[HTML5]].
        </p>
      </section>
    </section>

    <section class="informative">
      <h2>Web Animations overview</h2>
      <p>
        At a glance, Web Animations consists of two largely independent
        pieces, a <em>timing model</em> and an <em>animation model</em>.
        The role of these pieces is as follows:
      </p>
      <dl>
        <dt>Timing model</dt>
        <dd>
          Takes a moment in time and converts it to a proportional distance
          within a single iteration of an animation called the <em>time
          fraction</em>.
        </dd>
        <dt>Animation model</dt>
        <dd>
          Takes the <em>time fractions</em> produced by the timing model and
          converts them into a series of values to apply to the target
          properties and attributes.
        </dd>
      </dl>
      <p>
        Graphically, this flow can be represented as follows:
      </p>
      <p class="caption">
        Overview of the operation of Web Animations.<br>
        The current time is input to the timing model which produces a time
        fraction.<br>
        This distance is used as input to the animation model which produces the
        values to apply.
      </p>
      <p>
        For example, consider an animation that:
      </p>
      <ul>
        <li>starts after 3 seconds,</li>
        <li>runs twice,</li>
        <li>takes 2 seconds every time, and</li>
        <li>changes the width of a rectangle from 50 pixels to 100 pixels.</li>
      </ul>
      <p>
        The first three points apply to the timing model.
        At a time of 6 seconds, it will calculate that the animation should be
        half-way through its second iteration and produces the result 0.5.
        The animation model then uses that information to calculate a width for
        the rectangle of 75.
      </p>
      <p>
        This specification begins with the timing model and then proceeds to the
        animation model.
      </p>
    </section>

    <section class="informative">
      <h2>The animation timeline</h2>
      <p>
        Each document contains a timeline to which animations may be added.
        These animations have an interval during which they are scheduled to
        animate.
      </p>
      <p class="caption">
        At time <em>t</em> animations A and B are animating.
        Animation C has finished animating.
        Animation D has yet to begin and is not animating.
      </p>
      <p>
        The start time of the timeline is defined in <a
        href="#start-of-the-timeline" class="sectionRef"></a>.
      </p>
    </section>

    <section>
      <h2>Animations in the timeline</h2>
      <p>
        Animations in the timeline are represented by
        <code>AnimInstance</code> objects.
      </p>
      <section>
		  <h3>The <code>MealType</code> enum</h3>
		  <dl title="enum MealType" class="idl">
		  	<dt>rice</dt>
			<dd>a swamp grass that is widely cultivated as a source of food, esp. in Asia.</dd>
			<dt>noodles</dt>
			<dd>a strip, ring, or tube of pasta or a similar dough, typically made with egg and usually eaten with a sauce or in a soup.</dd>
			<dt>other</dt>
			<dd>anything that is not rice or noodles.</dd>
		  </dl>
		</section>
		<section>
        <h3>The <code>AnimInstance</code> interface</h3>
        <dl title="interface AnimInstance : TimedItem" class="idl">
          <dt>attribute AnimFunction function</dt>
          <dd>
            The animation function to apply (see <a href="#animation-values"
            class="sectionRef"></a>).
          </dd>
          <dt>readonly attribute MealType? template</dt>
          <dd>
            For live animation instances (see <a href="#creating-animations"
            class="sectionRef"></a>), the <code>Anim</code> object from
            which this object was minted. For independent animation instances,
            this property is <code>null</code>.
          </dd>
          <dt>readonly attribute Element targetElement</dt>
          <dd>
            The element being animated by this object.
          </dd>
          <dt>bool makeIndependent()</dt>
          <dd>
            <p>
              Makes this object independent of the template from which it was
              created.
              See <a href="#creating-animations" class="sectionRef"></a>.
            </p>
            <p>
              After this method returns, the <code>template</code>
              property will be <code>null</code>.
            </p>
            <p>
              Returns <code>true</code> if this object was previously a live
              animation instance, <code>false</code> if this object was already
              an independent animation instance.
            </p>
          </dd>
        </dl>
      </section>
	  <section>
        <h3>The <code>ArrayLike</code> interface</h3>
        <dl title="interface ArrayLike" class="idl">
          <dt>attribute unsigned long length</dt>
          <dd>
            The number of items in the container.
          </dd>
          <dt>void clear()</dt>
          <dd>
            Removes all the items from the container by calling
						<code>splice(0)</code>.
          </dd>
          <dt>sequence&lt;item&gt; add (item newItem,
                                        optional item... otherItems)</dt>
          <dd>
            <p>
              Add <code>newItem</code> and each <code>otherItems</code> as the
              last item(s) in the group by calling
							<code>splice(container.length, 0, newItem, otherItem1, ...
							otherItemN)</code>.
            </p>
            <p>
              Returns a sequence containing the added items:
              <code>[newItem, otherItem1, ... otherItemN]</code>.
            </p>
          </dd>
          <dt>sequence&lt;item&gt; remove (
                long index, optional unsigned long count)</dt>
          <dd>
            <p>
              Removes the item(s) at <code>index</code> by calling
              <code>splice(index, count)</code>. If <code>count</code> is not
			  supplied, the default value is <code>1</code>.
            </p>
            <p>
              Returns a sequence containing the removed items.
            </p>
          </dd>
          <dt>
            sequence&lt;item&gt; splice ()
          </dt>
          <dd>
            <p>
              Modifies the list of children of this container by first removing
              <code>deleteCount</code> items from <code>start</code> followed by
              adding <code>newItems</code> at the same point.
            </p>
            <p>
              The operation of slice is based on <a
                href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf#page=140">ECMAScript 5's
                Array.prototype.splice</a>.
            </p>
            <p>
              Returns a sequence of the items removed from group during the
              removal step (regardless of whether these items were re-added
              during the addition step).
            </p>
            <dl class="parameters">
              <dt>optional long start</dt>
              <dd>
                The index at which items should be removed and inserted.
                Negative indices represent an offset from the end of the list of
                items.
                This value is clamped to the range [<code>-length</code>,
                <code>length</code>].
              </dd>
              <dt>optional unsigned long deleteCount</dt>
              <dd>
                The number of items to remove from the container beginning at
                <code>start</code>.
                Negative values are clamped to zero, and all other values are
                clamped such that
                <code>0</code> &lt; <code>start</code> +
								<code>deleteCount</code> &le; <code>length</code>.
              </dd>
              <dt>optional sequence&lt;item&gt; newItems</dt>
              <dd>
                The items to be added at <code>start</code>.
                Each item, if it already has a parent group (including this
                group), is first removed from its parent group before being
                added to this group.
              </dd>
            </dl>
          </dd>
          <dt>
            sequence&lt;item&gt; splice (optional long start,
              optional unsigned long deleteCount, optional item... newItem)
          </dt>
          <dd>
            An overload of <code>splice</code> to take a variadic list of items
            rather than requiring a sequence.
            The operation is identical to <code>splice(unsigned long start,
            unsigned long deleteCount, sequence&lt;item&gt;
            newItems)</code>.
          </dd>
          <dt>long indexOf (item item)</dt>
          <dd>
            Returns the index of <code>item</code> within the container. If
						<code>item</code> appears more than once, returns first index.
            If <code>item</code> is not in the group, returns <code>-1</code>.
          </dd>
        </dl>
      </section>
    </section>
</body>
</html>
